<template>
	<div class="treeTable">
		<div class="boxTable" v-for="(_i,_in) in groupArrangement" :key="_i.value">
			<div
				class="left"
				:style="{
          width:_i.children.length==0&&_i.bool?lastWidth+'px':widthGroup+'px'
        }"
			>{{_i.value}}</div>
			<div
				class="right"
				:style="{marginLeft:_i.children.length==0&&_i.bool?lastWidth+'px':widthGroup+'px'}"
			>
				<template v-if="_i.children&&_i.children.length>0">
					<treeTable :groupArrangement="_i.children"></treeTable>
				</template>
				<template v-if="_i.children.length==0&&_i.bool">
					<div class="table">
						<div class="head">
              <span class="show" @click="showBool==_in?showBool=null:showBool=_in">
                <i v-if="showBool!==_in" class="el-icon-plus"></i>
                <i v-if="showBool==_in" class="el-icon-minus"></i>
              </span>
							<span
								class="span"
								:style="{minWidth:widthIndex+'px'}"
								v-for="(item,index) in _i.dataTable.indexArrTotal"
								:key="index"
							>
                <span class="tableBD tableBDSmall" v-if="item.one&&item.two">
                  <span class="one">{{item.one}}</span>
                  <span class="two">VS</span>
                  <span class="three">{{item.two}}</span>
                </span>
                <span v-if="item.one&&!item.two">{{item.one}}</span>
                <span v-if="!item.one&&!item.two">——</span>
              </span>
						</div>
						<div v-show="showBool==_in" class="num">
							<div class="numLine" v-for="(item,index) in _i.dataTable.indexArrDate" :key="index">
                <span
									:style="{
                  width:lastWidth+'px',
                  left:'-'+lastWidth+'px'
                }"
									class="time"
								>
                  <span class="tableBD tableBDSmall" v-if="item.time.one&&item.time.two">
                    <span class="one">{{zeroDel(item.time.one)}}</span>
                    <span class="two">VS</span>
                    <span class="three">{{zeroDel(item.time.two)}}</span>
                  </span>
                  <span v-if="item.time.one&&!item.time.two">{{zeroDel(item.time.one)}}</span>
                  <span v-if="!item.time.one&&!item.time.two">——</span>
                </span>

								<span
									:style="{
                    minWidth:widthIndex+'px',
                  }"
									class="numSpan"
									v-for="(_iss,_inss) in item.indexArr"
									:key="_inss"
								>
                  <span class="tableBD tableBDSmall" v-if="_iss.one&&_iss.two">
                    <span class="one">{{_iss.one}}</span>
                    <span class="two">VS</span>
                    <span class="three">{{_iss.two}}</span>
                  </span>
                  <span v-if="_iss.one&&!_iss.two">{{_iss.one}}</span>
                  <span v-if="!_iss.one&&!_iss.two">——</span>
                </span>
							</div>
						</div>
					</div>
				</template>
			</div>
		</div>
	</div>
</template>
<script>
	export default {
		name: "treeTable",
		props: {
			groupArrangement: {
				type: Array,
				default: () => {
					return [];
				}
			},
			lastWidth: {
				type: Number,
				default: () => {
					return 260;
				}
			},
			widthGroup: {
				type: Number,
				default: () => {
					return 200;
				}
			},
			widthIndex: {
				type: Number,
				default: () => {
					return 200;
				}
			}
		},
		components: {},
		data() {
			return {
				showBool: null
			};
		},
		watch: {},
		methods: {
			zeroDel(time) {
				let date = new Date(time);
				let year = date.getFullYear();
				let mon = date.getMonth() + 1;
				let day = date.getDate();
				mon = mon < 10 ? "0" + mon : mon;
				day = day < 10 ? "0" + day : day;
				return year + "-" + mon + "-" + day;
			}
		},
		beforeCreate() {},
		created() {},
		beforeMount() {},
		mounted() {},
		computed: {}
	};
</script>

<style scoped lang="scss">
	.boxTable {
		// display: flex;
		// justify-content: space-between;
		// align-items: center;
		width: 100%;
		position: relative;
		.left {
			font-size: 14px;
			border: 1px solid #e4e7ed;
			text-align: center;
			display: flex;
			align-items: flex-start;
			line-height: 46px;
			justify-content: center;
			height: 100%;
			overflow: hidden;
			border-bottom: none;
			border-left: none;
			position: absolute;
		}
		.right {
			box-sizing: border-box;
			.table {
				width: 100%;
				border-top: 1px solid #e4e7ed;
				.head {
					height: 46px;
					display: flex;
					align-items: center;
					justify-content: flex-start;
					position: relative;
					.show {
						position: absolute;
						left: -40px;
						border: 2px solid #909399;
						border-radius: 2px;
						padding: 0px 2px;
						transform: scale(0.6, 0.6);
					}
					.show .el-icon-plus,
					.show .el-icon-minus {
						font-weight: 600;
						color: #909399;
						font-size: 8px;
						cursor: pointer;
					}
					.show:hover,
					.show .el-icon-plus:hover,
					.show .el-icon-minus:hover {
						border-color: #307ef2;
						color: #307ef2;
					}
					.span {
						flex: 1;
						display: flex;
						font-size: 14px;
						justify-content: center;
						align-items: center;
						span {
							text-align: center;
						}
						.tableBDSmall {
							.one {
								font-size: 0.2rem;
							}
							.three {
								color: #1f2d3d;
							}
						}
						// 比对样式
						.tableBD {
							width: 100%;
							display: inline-block;
							.one {
								color: #1f2d3d;
								font-size: 0.22rem;
								margin: 0 0.2rem 0 0;
							}
							.two {
								display: inline-block;
								font-size: 0.16rem;
								background: #f6f7f8;
								line-height: 1;
								border-radius: 50%;
								margin: 0 0.2rem 0 0;
								border: 1px solid #e0e6ed;
								text-align: center;
								padding: 4px 5px;
							}
							.zhi {
								margin: 0 0.2rem 0 0;
							}
							.three {
								font-size: 0.2rem;
								color: #909399;
								margin: 0 0.2rem 0 0;
							}
							.up,
							.down {
								font-size: 0.16rem;
							}
							.up {
								color: #00bf8a;
							}
							.down {
								color: red;
							}
						}
					}
				}
				.num {
					width: 100%;
					.numLine {
						position: relative;
						height: 46px;
						font-size: 0.16rem;
						display: flex;
						align-items: center;
						justify-content: flex-start;
						span {
							text-align: center;
						}
						.tableBDSmall {
							.one {
								font-size: 0.2rem;
							}
							.three {
								color: #1f2d3d;
							}
						}
						// 比对样式
						.tableBD {
							width: 100%;
							display: inline-block;
							.one {
								color: #1f2d3d;
								font-size: 0.22rem;
								margin: 0 0.2rem 0 0;
							}
							.two {
								display: inline-block;
								font-size: 0.16rem;
								background: #f6f7f8;
								line-height: 1;
								border-radius: 50%;
								margin: 0 0.2rem 0 0;
								border: 1px solid #e0e6ed;
								text-align: center;
								padding: 4px 5px;
							}
							.zhi {
								margin: 0 0.2rem 0 0;
							}
							.three {
								font-size: 0.2rem;
								color: #909399;
								margin: 0 0.2rem 0 0;
							}
							.up,
							.down {
								font-size: 0.16rem;
							}
							.up {
								color: #00bf8a;
							}
							.down {
								color: red;
							}
						}
						.time {
							display: inline-block;
							position: absolute;
							height: 46px;
							line-height: 46px;
							text-align: center;
						}
						.numSpan {
							flex: 1;
							display: inline-block;
							height: 46px;
							line-height: 46px;
							text-align: center;
						}
					}
				}
			}
		}
	}
</style>
